<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="总敬业度" :total="totalCount">
          <a-tooltip title="部门总敬业度" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <trend :flag="momFlag" style="margin-right: 36px">
              <span slot="term">月环比</span>
              {{ momGrow }}
            </trend>
            <trend :flag="qoqFlag">
              <span slot="term">季环比</span>
              {{ qoqGrow }}
            </trend>
          </div>
          <template slot="footer">
            平均敬业度
            <span>{{ avgCount }}</span>
          </template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="申请数量" :total="applyCount | NumberFormat">
          <a-tooltip title="员工积分申请数量" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-area :dataSource="monthApplyCountByYear" />
          </div>
          <template slot="footer">
            月申请量
            <span>{{ monthApplyCount | NumberFormat }}</span>
          </template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="通过数量" :total="passApplyCount | NumberFormat">
          <a-tooltip title="员工积分申请审批通过数量" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-area :dataSource="monthPassApplyCountByYear" />
          </div>
          <template slot="footer">
            通过率
            <span>{{ passPercent }}</span>
          </template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="年龄段敬业度">
          <a-tooltip title="不同年龄段平均敬业度" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-bar :height="80" :dataSource="ageAvg" />
          </div>
          <template slot="footer">
            最敬业
            <span>{{ topAgeAvg }}</span>
          </template>
        </chart-card>
      </a-col>
    </a-row>

    <a-card :loading="loading" :bordered="false" :body-style="{ padding: '0' }">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }">
          <div class="extra-wrapper" slot="tabBarExtraContent" style="display: none">
            <div class="extra-item">
              <a>本季度</a>
              <a>本年度</a>
            </div>
            <a-range-picker :style="{ width: '256px' }" />
          </div>
          <a-tab-pane loading="true" tab="员工敬业度" key="1">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <!-- <bar title="员工敬业度统计" :dataSource="monthCountByYear" /> -->
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list title="员工敬业度排行榜" :list="rank" />
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="部门敬业度" key="2">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar title="员工敬业度统计" :dataSource="monthCountByYear" />
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list title="部门敬业度排行榜" :list="deptRank" />
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>

    <a-row>
      <a-col :span="24">
        <a-card :loading="loading" :bordered="false" title="最近一年申请量统计" :style="{ marginTop: '24px' }">
          <a-row>
            <a-col :span="6">
              <head-info title="本月申请" :content="monthApplyCount"></head-info>
            </a-col>
            <a-col :span="2">
              <a-spin class="circle-cust">
                <a-icon slot="indicator" type="environment" style="font-size: 24px" />
              </a-spin>
            </a-col>
            <a-col :span="6">
              <head-info title="本季申请" :content="seasonApplyCount"></head-info>
            </a-col>
            <a-col :span="2">
              <a-spin class="circle-cust">
                <a-icon slot="indicator" type="team" style="font-size: 24px" />
              </a-spin>
            </a-col>
            <a-col :span="6">
              <head-info title="总申请量" :content="applyCount"></head-info>
            </a-col>
            <a-col :span="2">
              <a-spin class="circle-cust">
                <a-icon slot="indicator" type="rise" style="font-size: 24px" />
              </a-spin>
            </a-col>
          </a-row>
          <v-chart :forceFit="true" :height="height" :data="monthApplyCountByYear" :scale="scale">
            <v-tooltip />
            <v-axis />
            <v-smooth-line position="x*y" shape="smooth" />
            <v-point position="x*y" shape="circle" />
          </v-chart>
          <line-chart-multid :fields="applyFields" :dataSource="monthApplyCountByYear" style="display: none"></line-chart-multid>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import ChartCard from '@/components/ChartCard'
import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'

import Trend from '@/components/Trend'
import Radar from '@/components/chart/Radar'
import { getLoginfo, getVisitInfo } from '@/api/api'

const scale = [
  {
    dataKey: 'total',
    min: 0,
  },
  {
    dataKey: 'applyMonth',
    min: 0,
    max: 1,
  },
]

export default {
  name: 'IndexChart',
  components: {
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    LineChartMultid,
    HeadInfo,
    Radar,
  },
  data() {
    return {
      loading: true,
      center: null,
      loginfo: {},
      applyFields: ['total'],
      indicator: '<a-icon type="loading" style="font-size: 24px" spin />',
      url: {
        findTotalCount: '/statistic/dedication/findTotalCount',
        findApplyCount: '/statistic/dedication/findApplyCount',
        findMonthApplyCount: '/statistic/dedication/findMonthApplyCount',
        findSeasonApplyCount: '/statistic/dedication/findSeasonApplyCount',
        findPassApplyCount: '/statistic/dedication/findPassApplyCount',
        findAgeAvg: '/statistic/dedication/findAgeAvg',
        findMonthCountByYear: '/statistic/dedication/findMonthCountByYear',
        findRank: '/statistic/dedication/findRank',
        findMonthApplyCountByYear: '/statistic/dedication/findMonthApplyCountByYear',
        findMomGrow: '/statistic/dedication/findMomGrow',
        findQoqGrow: '/statistic/dedication/findQoqGrow',
        findDeptRank: '/statistic/dedication/findDeptRank',
        findMonthPassApplyCountByYear: '/statistic/dedication/findMonthPassApplyCountByYear',
      },
      totalCount: '0.0',
      momGrow: '-',
      qoqGrow: '-',
      momFlag: '',
      qoqFlag: '',
      avgCount: '0.0',
      applyCount: '0.0',
      monthApplyCount: '0.0',
      passApplyCount: '0.0',
      passPercent: '100%',
      seasonApplyCount: '0.0',
      ageAvg: [],
      topAgeAvg: '-',
      monthCountByYear: [],
      rank: [],
      deptRank: [],
      monthApplyCountByYear: [],
      monthPassApplyCountByYear: [],
      scale,
      height: 400,
    }
  },
  created() {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
    this.initStatisticInfo()
  },
  methods: {
    initStatisticInfo() {
      let params = {
        startDate: '',
        endDate: '',
      }
      getAction(this.url.findTotalCount, params).then((res) => {
        if (res.success) {
          this.totalCount = res.result[0].total + ''
          this.avgCount = res.result[0].average + ''
        }
      })
      getAction(this.url.findMomGrow, params).then((res) => {
        if (res.success) {
          this.momGrow = res.result[0].grow + ''
          if (this.momGrow > 0) {
            this.momFlag = 'up'
            this.momGrow += '%'
          } else if (this.momGrow == 0) {
            this.momFlag = ''
            this.momGrow = '-'
          } else {
            this.momFlag = 'down'
            this.momGrow += '%'
          }
        }
      })
      getAction(this.url.findQoqGrow, params).then((res) => {
        if (res.success) {
          this.qoqGrow = res.result[0].grow + ''
          if (this.qoqGrow > 0) {
            this.qoqFlag = 'up'
            this.qoqGrow += '%'
          } else if (this.qoqGrow == 0) {
            this.qoqFlag = ''
            this.qoqGrow = '-'
          } else {
            this.qoqFlag = 'down'
            this.qoqGrow += '%'
          }
        }
      })
      getAction(this.url.findDeptRank, params).then((res) => {
        if (res.success) {
          let data = res.result
          for (let i = 0; i < data.length; i++) {
            this.deptRank.push({
              name: data[i].departName,
              total: data[i].dedication,
            })
          }
        }
      })
      getAction(this.url.findApplyCount, params).then((res) => {
        if (res.success) {
          this.applyCount = res.result[0].total + ''
        }
      })
      getAction(this.url.findMonthApplyCount, params).then((res) => {
        if (res.success) {
          this.monthApplyCount = res.result[0].total + ''
        }
      })
      getAction(this.url.findSeasonApplyCount, params).then((res) => {
        if (res.success) {
          this.seasonApplyCount = res.result[0].total + ''
        }
      })
      getAction(this.url.findAgeAvg, params).then((res) => {
        if (res.success) {
          let data = res.result
          let value = 0
          let index = 0
          for (let i = 0; i < data.length; i += 1) {
            if (data[i].dedication > value) {
              value = data[i].dedication
              index = i
            }
            this.ageAvg.push({
              x: data[i].ageRange,
              y: data[i].dedication,
            })
          }
          this.topAgeAvg = data[index].ageRange
        }
      })
      getAction(this.url.findMonthCountByYear, params).then((res) => {
        if (res.success) {
          let data = res.result
          for (let i = 0; i < data.length; i += 1) {
            this.monthCountByYear.push({
              x: data[i].applyMonth,
              y: data[i].total,
            })
          }
        }
      })
      getAction(this.url.findMonthPassApplyCountByYear, params).then((res) => {
        if (res.success) {
          let data = res.result
          for (let i = 0; i < data.length; i += 1) {
            this.monthPassApplyCountByYear.push({
              x: data[i].applyMonth,
              y: data[i].total,
            })
          }
        }
      })
      getAction(this.url.findRank, params).then((res) => {
        if (res.success) {
          let data = res.result
          for (let i = 0; i < data.length; i++) {
            this.rank.push({
              name: data[i].realname + '（' + data[i].departName + '）',
              total: data[i].dedication,
            })
          }
        }
      })
      getAction(this.url.findMonthApplyCountByYear, params).then((res) => {
        if (res.success) {
          let data = res.result
          for (let i = 0; i < data.length; i++) {
            this.monthApplyCountByYear.push({
              x: data[i].applyMonth,
              y: data[i].total,
            })
          }
        }
      })
      getAction(this.url.findPassApplyCount, params).then((res) => {
        if (res.success) {
          this.passApplyCount = res.result[0].total + ''
          this.passPercent = parseFloat(((this.passApplyCount / this.applyCount) * 100).toFixed(2)) + '%'
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}

.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    font-size: 0.95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }

  p {
    line-height: 42px;
    margin: 0;

    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}
</style>